<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;

    /* overflow: hidden; */
}
.pass{
  margin-top: 20px;
}
 .upload{
     display: none;
 }
 .tablelogin{
   position: relative;
   
   top: 40px;
 }
 img{
  position: relative;
  
  top:-30px;
  left: -50px;
  /* left: -65px; */
 }
 .btavater{
    position: relative;
    top: 0px;
    left: 27%;
    margin: 0 auto;
    /* left: 70px; */
   
    
   
 }
 .avater{
   position: relative;
   margin: 0 auto;
   top:30px;
 }
p{
  position: relative;
  top: -5px;
}
.layout-logo{
    width: 50px;
    height: 50px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    /* left: 20px; */
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.bt{
  margin-top: 20px;
  width:300px;
  
}
.layout-footer-center{
    text-align: center;
}
.content{
  /* padding: 0 50px; */
  height: 100vh;
  margin: 0 auto;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <!-- <div class="layout-logo"></div> -->
                    <div class="layout-nav">
                          <MenuItem name="3">
                          
                        </MenuItem>
                        <MenuItem name="3">
                          
                        </MenuItem>
                        <MenuItem name="3" >
                            <Icon type="ios-analytics"></Icon>
                           <a  @click="gosign">注册</a> 
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            beta1.0
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content class="content" >
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>首页</BreadcrumbItem>
                    <BreadcrumbItem >注册</BreadcrumbItem>
                    <BreadcrumbItem>登录</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <div style="min-height: 500px;min-width:300px">
                        
                          <!-- <p slot="title"> 注册</p> -->
                          <!-- <div class="avater">
                <input id="up" class="upload" @change="add" type="file">
            <Button class="btavater" type="success" @click="addnew" shape="circle" icon="logo-chrome">上传头像</Button>
              <img :src="uri">
       </div> -->
                         <div class="tablelogin">
                             <Input  v-model="value1" placeholder="用户名" style="width: 300px" /><br>
                            <Input class="pass" v-model="value2" placeholder="密码" style="width: 300px" /><br>
                             <Button class="bt" type="primary" size="large" @click="lg" ghost>登录</Button>
                         </div>
                        
                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-center">2020-2021 &copy; Godguns</Footer>
        </Layout>
    </div>
</template>





<script>
import Vue from 'vue'
import { List,Input,Button,Grid,Card } from 'view-design';
Vue.component('List', List);
Vue.component('Input', Input);
Vue.component('Button', Button);
Vue.component('Grid',Grid);
Vue.component('Card',Card);

export default {
    data(){
       return {
            value1:"",
            value2:'',
            data:""
       }
    },
    methods:{
       gosign:function(){
             this.$router.push({path: '/'})
             console.log(this.__proto__.$xxx)
             //????????????????????????????
       },
        lg(){
            var that=this;
           
            this.$axios.get('/login',{
                  params:{
                    name:that.value1,
                    password:that.value2
                  }
            }).then(function(res){
                that.data=res.data;
               // window.console.log(that.data.ret)
                if(res.data.ret=="success"){
                
                     Vue.prototype.$userMsg = res.data.name; 
                      Vue.prototype.$num = res.data.number; 
                      Vue.prototype.$avatericon=res.data.avater;
                     Vue.prototype.$imgs=[]
                     Vue.prototype.$imgh=[]
                      Vue.prototype.$imgw=[]
                       console.log(res.data.imgs.length)
                      for(let i=0;i<res.data.imgs.length;i++){
                          
                             Vue.prototype.$imgs.push(res.data.imgs[i].url);
                               Vue.prototype.$imgh.push(res.data.imgs[i].height)
                                Vue.prototype.$imgw.push(res.data.imgs[i].width)
                      }
                      localStorage.setItem("imgs",  Vue.prototype.$imgs);
                       localStorage.setItem("imgh",  Vue.prototype.$imgh);
                        localStorage.setItem("imgw",  Vue.prototype.$imgw);
                      
                      if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

                              that.$router.push({name:"mobileShouye"});
                            // router.push({name:"Show"})


                            }else{
                            // router.push({name:"Showpc"})

                              that.$router.push({name:"Shouye"})

                            }
                    //  that.$router.push({path: '/shouye'})
                }else if(res.data.ret=="fail"){
                    alert('登录失败请重新尝试！')
                }
            })
        }
    }


}

</script>


